<div>
  <div ng-repeat="param in paramChanges">
    <div class="row">
      <div class="col-lg-9 col-md-9 col-sm-9">
        <span ng-if="activeItem !== $index">
          <[$index + 1]>. Change parameter <span class="label label-info"><[param.name]></span> <[HUMAN_READABLE_ARGS_RENDERERS[param.generator_id](param.customization_args)]>
        </span>

        <div ng-if="activeItem === $index">
          <form novalidate class="oppia-form" name="newParameterForm" ng-submit="commitParamChange(activeItem)">
            Select a parameter to change:

            <select2-dropdown item="tmpParamChange.name" choices="paramNameChoices" placeholder="Choose or type new" new-choice-regex="^[A-Za-z]+$" width="180px">
            </select2-dropdown>

            <span ng-show="tmpParamChange.name">
              <select ng-model="tmpParamChange.generator_id"
                      ng-options="key as PREAMBLE_TEXT[key] for (key, value) in ALLOWED_KEYS"
                      style="width: 220px;" required>
              </select>

              <value-generator-editor generator-id="tmpParamChange.generator_id"
                                      customization-args="tmpParamChange.customization_args"
                                      obj-type="getObjTypeForParam(tmpParamChange.select2Name.text) || 'UnicodeString'">
              </value-generator-editor>
            </span>
            <br>

            <input type="submit" value="Close editor">
          </form>
        </div>
      </div>

      <div class="col-lg-3 col-md-3 col-sm-3">
        <span class="pull-right" ng-if="isEditable">
          <button type="button" class="btn btn-default btn-xs" ng-disabled="activeItem !== -1" ng-click="startEditParamChange($index)">
            <span class="glyphicon glyphicon-pencil" title="Edit parameter change"></span>
          </button>

          <button type="button" class="btn btn-default btn-xs" ng-show="$index != 0" ng-disabled="activeItem !== -1" ng-click="swapParamChanges($index, $index - 1)">
            <span class="glyphicon glyphicon-arrow-up" title="Move parameter change up"></span>
          </button>
          <span ng-hide="$index != 0" class="oppia-grayed">
            <span class="glyphicon glyphicon-arrow-up" title="Move parameter change up"></span>
          </span>

          <button type="button" class="btn btn-default btn-xs" ng-show="$index < paramChanges.length - 1" ng-disabled="activeItem !== -1" ng-click="swapParamChanges($index, $index + 1)">
            <span class="glyphicon glyphicon-arrow-down" title="Move parameter change down"></span>
          </button>
          <span ng-hide="$index < paramChanges.length - 1" class="oppia-grayed">
            <span class="glyphicon glyphicon-arrow-down" title="Move parameter change down"></span>
          </span>

          <button type="button" class="btn btn-default btn-xs" ng-disabled="activeItem !== -1 && activeItem !== $index" ng-click="deleteParamChange($index)">
            <span class="glyphicon glyphicon-remove" title="Delete parameter change"></span>
          </button>
        </span>
      </div>
    </div>
  </div>

  <div class="row" ng-if="isEditable">
    <div class="col-lg-12 col-md-12 col-sm-12">
      <div class="pull-right">
        <button type="button" class="btn btn-default btn-xs" ng-disabled="activeItem !== -1" ng-click="startAddParamChange()">
          Add parameter change
        </button>
        <a href="https://code.google.com/p/oppia/wiki/Parameters" target="_blank">
          <span class="glyphicon glyphicon-question-sign"></span>
        </a>
      </div>
    </div>
  </div>
</div>
